<template>
    <ul class="nav-bar">
        <!-- <li  v-for="(i,index) in lists" :key="index" @click="addClassName(i.path)"> -->
           <router-link :to="i.path"  v-for="(i,index) in lists" :key="index"  active-class="active"  tag="li">
           <a href="">
             <img :src="($route.path).includes(i.path)?lists[index].active : lists[index].img" alt="" >
                <span>{{i.name}}</span>
           </a> 
           </router-link>
           <!-- <a :href="i.hash">
             <img :src="i.path===$route.hash?lists[index].active : lists[index].img" alt="">
             <span>{{i.name}}</span>
           </a>
        </li> -->
    </ul>
</template>
<style scoped>
.nav-bar:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
ul{
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    padding: 0;
    margin: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0;
    z-index: 100;
    background: #fff;
    list-style: none;
}
.nav-bar  li{
    display: list-item;
    width: 25%;
    text-align: center;
    list-style-type: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-bar  li a{
    width: 100%;
    height: 49px;
    float: left;
    line-height: 28px;
    position: relative;
    color: #797d82;
    outline: none;
    text-decoration: none;
}
img{
    width: 21px;
    height: 21px;
    padding-top: 8px;
}
.active span{
    color: #ff5f16;
}

span{
    font-size: 12px;
    line-height: 12px;
    word-break: keep-all;
    top: 32px;
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    color: #797d82;
}
.nav {
  position: fixed;
    bottom: 0;
    width: 100%;
}
</style>
<script>
// import Vue from 'vue'
// Vue.directive('router-link-exact-active active',{
//   inserted(){

//   }
// })
export default {
  data () {
    return {
      lists:[
        {
          img:'',
          active:'',
          name:'电影',
          path:'/Film'
        },
        {
          img:'',
          active:'',
          name:'剧场',
          path:'/Theater'
        },
        {
          img:'https://mall.s.maizuo.com/mzmovie-icon-news-42x42-gray.png',
          active:'https://mall.s.maizuo.com/mzmovie-icon-news-42x42-gray.png',
          name:'资讯',
          path:'/News'
        },
        {
          img:'',
          active:'',
          name:'我的',
          path:'/User'
        }
      ],
    }
  },
  // directives: {
  //   style: {
  //   // 指令的定义
  //     inserted: function (el) {
  //       el.style.color = '#ff5f16'
  //     }
  //   }
  // },
  methods: {
    changeA3 () {
      this.User = !this.User
      this.Login = !this.Login
    },

  },
  mounted () {
    console.log(this.$route.path);
  },
  updated () {

  },
}
</script>
